<template>
    <div class="pb_a">

        <van-nav-bar class="head_nb" title="我的"/>

        <div class="pt_a bg_w" style="height:100px;">
            <van-row type="flex" class="p_10">
                <van-col span="6" class="ta_c">
                    <van-image round width="4rem" height="4rem" src="https://img.yzcdn.cn/vant/cat.jpeg"/>
                </van-col>
                <van-col span="18" class="mt_10">
                    <div>{{user.username || 'llsydn'}}</div>
                    <div>每天刷题，每天进步，感觉真好~</div>
                </van-col>
            </van-row>
        </div>

        <van-cell-group title="我的科目">
            <van-cell title="信息系统项目管理师" value="切换" is-link to='/subject'/>
            <van-cell>
                <van-row type="flex">
                    <van-col span="10">
                        <van-circle v-model="currentRate" :rate="84" :speed="50" :color="gradientColor" :text="text"/>
                    </van-col>
                    <van-col span="14">
                        <div style="clear:both;margin-top:8px;">
                            <div style="float:left;">
                                <van-icon name="shop-collect-o" size="1.5rem"/>
                            </div>
                            <div style="float:left;">
                                试题收藏：
                            </div>
                            <div>
                                <van-tag plain type="primary">250</van-tag>
                            </div>
                        </div>
                        <div style="clear:both;">
                            <div style="float:left;">
                                <van-icon name="failure" size="1.5rem"/>
                            </div>
                            <div style="float:left;">
                                错题记录：
                            </div>
                            <div>
                                <van-tag plain type="primary">250</van-tag>
                            </div>
                        </div>
                        <div style="clear:both;">
                            <div style="float:left;">
                                <van-icon name="records" size="1.5rem"/>
                            </div>
                            <div style="float:left;">
                                做题记录：
                            </div>
                            <div>
                                <van-tag plain type="primary">250</van-tag>
                            </div>
                        </div>
                    </van-col>
                </van-row>
            </van-cell>
        </van-cell-group>

        <van-cell-group title="学习系统">
            <van-cell title="试题收藏" is-link to="index"/>
            <van-cell title="错题记录" is-link to="index"/>
            <van-cell title="做题记录" is-link to="index"/>
        </van-cell-group>

        <van-cell-group title="账号管理">
            <van-cell title="个人信息" is-link to="index"/>
            <van-cell title="修改密码" is-link to="index"/>
            <van-cell title="退出登录" is-link @click="toPath('/login')"/>
        </van-cell-group>
    </div>
</template>

<script>
    import Vue from 'vue';
    import {mapState} from 'vuex';
    import {Cell, CellGroup, Circle, Col, Icon, Image, NavBar, Row, Tag} from 'vant';

    Vue.use(Cell).use(CellGroup).use(Circle).use(Col).use(Icon).use(Image).use(NavBar).use(Row).use(Tag);
    export default {
        name: "User",
        data() {
            return {
                currentRate: 0,
                gradientColor: {
                    '0%': '#3fecff',
                    '100%': '#6149f6'
                }
            };
        },
        computed: {
            ...mapState(['user']),
            text() {
                return '正确率:' + this.currentRate.toFixed(0) + '%'
            }
        },
        methods: {
            toPath(url) {
                //清空登录信息
                this.$store.dispatch('logout');
                //去到登录页面
                this.$router.push(url);
            }
        }
    }
</script>

<style scoped>

</style>
